import './index.scss'
import { LeftOutline, UserCircleOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { RightOutlined } from '@ant-design/icons'

function Grsz() {
  const navigate = useNavigate()
  return (
    <div className='grsz'>
      <div className='grsz-top'>
        <span className='grsz-top-left'>{<LeftOutline onClick={() => navigate(-1)}></LeftOutline>}</span>
        <span className='grsz-top-right'>个人信息设置</span>
      </div>
      <div className='grsz-bg'>
        <div className='grsz-bg-one'>
          <span className='grsz-bg-left'>头像</span>
          <span>{<UserCircleOutline className='grsz-bg-right' />}</span>
        </div>
        <div className='grsz-bg-two'>
          <span className='grsz-bg-two-left'>昵称</span>
          <span className='grsz-bg-two-right'>潘尼拉{<RightOutlined className='grsz-bg-two-right-icon' />}</span>
        </div>
      </div>
      <div className='grsz-bg-three'>
        <div className='grsz-bg-three-gender'>
          <span className='grsz-bg-three-gender-left'>性别</span>
          <div className='grsz-bg-three-gender-right'>
            <div className='grsz-bg-three-gender-icon'>男</div>
            <RightOutlined className='grsz-bg-two-right-icon' />
          </div>
        </div>
        <div className='grsz-bg-three-physical'>
          <div className='grsz-bg-three-physical-header'>
            <span className='grsz-bg-three-physical-title'>体征</span>
            <div className='grsz-bg-three-physical-content'>
              <div className='grsz-bg-three-physical-item'>
                <span className='grsz-bg-three-physical-label'>身高</span>
                <span className='grsz-bg-three-physical-value'>165cm</span>
              </div>
              <div className='grsz-bg-three-physical-item'>
                <span className='grsz-bg-three-physical-label'>体重</span>
                <span className='grsz-bg-three-physical-value'>50kg</span>
              </div>
              <div className='grsz-bg-three-physical-item'>
                <span className='grsz-bg-three-physical-label'>年龄</span>
                <span className='grsz-bg-three-physical-value'>25</span>
              </div>
            </div>
            <RightOutlined className='grsz-bg-two-right-icon2' />
          </div>
        </div>
      </div>
      <div className='grsz-bg-four'>
        <div className='grsz-bg-four-item'>
          <span className='grsz-bg-four-left'>邮箱</span>
          <span className='grsz-bg-four-right'>17657846198@163.com</span>
        </div>
        <div className='grsz-bg-four-item'>
          <span className='grsz-bg-four-left'>绑定微信</span>
          <span className='grsz-bg-four-right'>去绑定<RightOutlined className='grsz-bg-two-right-icon' /></span>
        </div>
      </div>
       <div className='grsz-bg-five'>
         <div className='grsz-bg-five-item' onClick={()=>navigate('/smrz')}>
           <span className='grsz-bg-five-left'>实名认证</span>
           <span className='grsz-bg-five-right'>去认证<RightOutlined className='grsz-bg-two-right-icon' /></span>
         </div>
         <div className='grsz-bg-five-item' onClick={()=>navigate('/yhk')}>
           <span className='grsz-bg-five-left'>绑定银行卡</span>
           <span className='grsz-bg-five-right'>去绑定<RightOutlined className='grsz-bg-two-right-icon' /></span>
         </div>
       </div>
    </div>
  )
}

export default Grsz